<!--
    * @FileDescription: 学校管理
    * @Author: kahu
    * @Date: 2022/8/25
    * @LastEditors: kahu
    * @LastEditTime: 2022/8/25
-->
<template>
  <div class="content">

    <div class="toolbar">
        <el-form ref="formParams" :inline="true" :model="formParams">
          <el-form-item prop="schoolType" label="区域">
            <el-select v-model="formParams.schoolType" placeholder="请选择消息类型">
              <el-option
                v-for="(item, index) in tipsList"
                :key="index"
                :label="item.table"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="schoolName" label="学校名称">
            <el-input v-model="formParams.schoolName" maxlength="20" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="schoolType" label="学校类别">
            <el-select v-model="formParams.schoolType" placeholder="请选择消息类型">
              <el-option
                v-for="(item, index) in tipsList"
                :key="index"
                :label="item.table"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="schoolNature" label="学校性质">
            <el-select v-model="formParams.schoolNature" placeholder="请选择消息类型">
              <el-option
                v-for="(item, index) in tipsList"
                :key="index"
                :label="item.table"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label-width="0">
            <el-button type="primary" plain @click="search('formParams')">查询</el-button>
            <el-button plain @click="clear('formParams')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    <div>
      <el-button type="primary" @click="details">添加学校</el-button>
      <el-button type="primary" @click="handleDelete">删除学校</el-button>
      <el-button type="primary" @click="handleEditForm">创建分校</el-button>
    </div>

    <el-table
      ref="multipleTable"
      v-loading="loading"
      class="table"
      stripe
      border
      :header-cell-style="tableOptions.headStyle"
      @selection-change="selectionChangeHandle"
      :data="list"
    >
      <el-table-column
        type="selection"
        align="center"
        width="55"
      />
      <el-table-column
        prop="schoolName"
        align="center"
        label="学校名称"
        show-overflow-tooltip
      />
      <el-table-column
        prop="schoolType"
        align="center"
        label="学校类别"
        show-overflow-tooltip
      />
      <el-table-column
        prop="schoolNature"
        align="center"
        label="学校性质"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span
            v-if="scope.row.registerUrl"
          >{{ scope.row.registerUrl }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="schoolNature"
        align="center"
        label="联系人"
        show-overflow-tooltip
      />
      <el-table-column
        prop="schoolRegion"
        label="所在区域"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="更新时间"
        align="center"
        show-overflow-tooltip
      />

      <el-table-column
        align="center"
        label="操作"
        width="260"
        fixed="right"
      >
        <template v-slot="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleCopeLink(scope.row)"
          >查看
          </el-button>
          <el-button
            size="mini"
            type="warning"
            @click="handleEditForm(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="formParams.page"
      :page-size="formParams.pageSize"
      :page-sizes="tableOptions.pageSizes"
      :total="tableOptions.total"
      @size-change="(val)=>handlePageChange(val,1)"
      @current-change="(val)=>handlePageChange(val,2)"
    />
    <!--  表单  -->
    <ChannelForm
      v-model="showForm"
      :item="formItem"
      @confirm="handleResetTable"
      @cancel="handleResetTable"
    />
    <school-details ref="schoolDetails" @reset="reset" />
  </div>
</template>

<script>
import ChannelForm from './../schoolfrom/index'
import { schoollist, deleteschool } from '@/api/schoolmanage';
import schoolDetails from './details'
export default {
  name: 'Index',
  components: { ChannelForm,schoolDetails },
  data () {
    return {
      showForm: false,
      formItem: {},
      loading: false,
      list: [],
      tipsList:[
        {value:0,table:"本科"},
        {value:1,table:"专科"},
        {value:2,table:"初中"},
        {value:3,table:"高中"},
        ],
      tableOptions: {
        headStyle: { background: '#EEF3FF', color: '#333333' },
        pageSizes: [5, 10, 30, 50, 100],
        total: 0
      },
      formParams: {
        schoolNature: null,
        schoolName: null,
        schoolType: null,
        dates: [],
        page: 1,
        pageSize: 10
      },
      dataListSelections: [],
    }
  },
  created () {
    this.handleGetTable()
  },
  methods: {
    // 添加学校
    details (row) {
      this.$refs.schoolDetails.getUser({ buyerUserId: row.buyerUserId, orderFormid: row.orderFormid })
    },

    //查询
    async search(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.tableOptions.total = 1
          this.formParams.page = 1
          this.handleGetTable()
        } else {
          return false
        }
      })
    },
     // 清除
     clear(formName) {
      this.$refs[formName].resetFields()
      this.handleGetTable()
    },
    handleResetTable () {
      this.formParams.page = 1
      this.handleGetTable()
    },
    async handleGetTable () {
      this.loading = true
      const { data } = await schoollist(this.formParams);
      this.list = data.list
      this.tableOptions.total = data.total
      this.loading = false
    },
    /**
     * 分页
     * @param val
     * @param type 1page 2pageSize
     */
    handlePageChange (val, type) {
      type === 1 ? this.formParams.page = val : this.formParams.pageSize = val
      this.handleGetTable()
    },
    handleEditForm (item) {
      if (!item) {
        this.formItem = {}
      } else {
        this.formItem = item
      }
      this.showForm = true
    },

    handleCopeLink (item) {
      const htmlInputElement = document.createElement('input');
      htmlInputElement.value = item.registerUrl
      document.body.appendChild(htmlInputElement);
      htmlInputElement.select()
      document.execCommand('copy')
      document.body.removeChild(htmlInputElement)
      this.$message.success('复制成功')
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    handleDelete (item) {
      var schoolIds = item.schoolId ? [item.schoolId] : this.dataListSelections.map(idsitem => {
          return idsitem.schoolId
        })
      var schoolName=item.schoolName ? [item.schoolName] : this.dataListSelections.map(namesitem => {
          return namesitem.schoolName
        })
      const message = `确定对${schoolName.join(',')}进行[${ item.schoolId ? '删除' : '批量删除'}]操作?`
      this.$confirm(message, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.loading = true
        // TODO 删除逻辑
        await deleteschool(schoolIds)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
      }).finally(() => {
        this.loading = false
        this.handleGetTable()
      });
    }
  }
}
</script>

<style lang='scss' scoped>
@import url("../../../styles/elDialog.scss");
.content {
  padding: 20px;
  box-sizing: border-box;

  .table {
    margin: 20px 0;
  }
}
</style>
